<%-- 
    Document   : indexHeader
    Created on : Mar 7, 2013, 8:28:36 AM
    Author     : ThanhTai
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x"%>

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/xmlproject.js"></script>
<script type="text/javascript">
    function moveOut(){
        document.getElementById('cart_content').style.display = "none";
    }

    function moveIn(){
        document.getElementById('cart_content').style.display = "block";
    }

    function loginCustomer(){
        var form = document.getElementById("testform");
        var username = form.txtUsername.value;
        var password = form.txtPassword.value;
        document.getElementById("login-form").innerHTML="<p class=\"title\">login ...</p>";
        var xmlDetailHttp= null;
        try {
            xmlDetailHttp = XMLHttpRequest();
        }catch(e){
            try{
                xmlDetailHttp = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e){
                xmlDetailHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        if(xmlDetailHttp==null){
            alert("Your browser does not support AJAX!")
            return;
        }
        try{
            var url= "CustomerController?action=login&username="+ username + "&password=" +password;
            xmlDetailHttp.open("GET",url,true);
            xmlDetailHttp.send(null);
            // get response o SearchHotelServlet action=ViewDetail
            xmlDetailHttp.onreadystatechange = function()
            {
                if(xmlDetailHttp.readyState==4 && xmlDetailHttp.status==200){
                    var xml = xmlDetailHttp.responseXML;
                    if(xml == null) {
                        var loginString = "<div>"
                            +"<form id=\"testform\" name=\"testform\" onsubmit=\"\">"
                            +"<table border=\"0\" cellspacing=\"0\">"
                            +"<tr>"
                            +"<td class=\"username\"><label>Email:</label> </td>"
                            +"<td class=\"password\"><label> Password:</label></td>"
                            +"<td></td><td></td>"
                            +"</tr>"
                            +"<tr>"
                            +"<td>"
                            +"<input  style=\" width: 150px;\"type=\"text\" name=\"txtUsername\" id=\"txtUsername\"value=\"\">"
                            +"</td>"
                            +"<td>"
                            +"<input style=\" width: 150px;\" type=\"password\" name=\"txtPassword\" id=\"txtPassword\" value=\"\">"
                            +"</td>"
                            +"<td>"
                            +"<input id=\"btn\" type=\"submit\" value=\"Login\" onclick=\"loginCustomer();\"/>"
                            +"</td>"
                            +"<td>"
                            +"<input id=\"btn\" value=\"Register\" onclick=\"window.location.href='register.jsp'\"/>"
                            +"</td>"
                            +"</tr>"
                            +"</table>"
                            +"</form>"
                            +"</div>";
                        document.getElementById("login-form").innerHTML="";
                        document.getElementById("login-form").innerHTML=loginString;
                    }else {
                        var customer = xml.getElementsByTagName("customer")[0].childNodes[1].textContent;
                        var result = "<div id=\"welcome\">"
                            +"<span>Welcome:" + customer +",</span>"
                            +"<a id=\"Btnlogout\" href=\"#\" onclick=\"logout();\">Log out</a>"
                            +"</div>";
                        document.getElementById("login-form").innerHTML = result;
                    }
                }
            }
        }catch(e){
            alert("error: "+ e);
        }
    }

    function logout(){
        sessionStorage.xmldom = "";
        //        loadCartShipping();

        document.getElementById("login-form").innerHTML="<p class=\"title\">Logout ...</p>";
        var xmlDetailHttp= null;
        try {
            xmlDetailHttp = XMLHttpRequest();
        }catch(e){
            try{
                xmlDetailHttp = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e){
                xmlDetailHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        if(xmlDetailHttp==null){
            alert("Your browser does not support AJAX!")
            return;
        }
        try{
            var url= "CustomerController?action=logout";
            xmlDetailHttp.open("GET",url,true);
            xmlDetailHttp.send(null);
            // get response o SearchHotelServlet action=ViewDetail
            xmlDetailHttp.onreadystatechange = function()
            {
                if(xmlDetailHttp.readyState==4 && xmlDetailHttp.status==200){
                    window.location = "../TabletShopping/index.jsp"
                }
            }
        }catch(e){
            alert("error: "+ e);
        }
    }

    getAllProducts('xml/allProducts.xml');

    function brandProducts(brandID, brandName){
        document.getElementById("body").innerHTML= "<div id=\"titleBrandProductResult\">"
            +" <font style=\"font-size: 18px; font-family: Tahoma;\">"+ brandName + "</font>"
            +"</div>"
            +"<div id=\"brandProductResult\">"
            +" <font style=\"font-size: 14px; font-family: Tahoma;\">Loading...</font>"
            +"</div>";
        var result_Products;
        try{
            var str="//product[brandID="+ brandID+"]";
            var result=allProductDOM.evaluate(str, allProductDOM ,null, XPathResult.ANY_TYPE , null);

            var param = result.iterateNext();
            if(param==null){
                document.getElementById("brandProductResult").innerHTML= " <font style=\"font-size: 14px; font-family: Tahoma;\">Product is Empty.</font>";
                return;
            }
            else{
                result_Products = "<products>";
                while (param) {
                    result_Products+="<product>";
                    result_Products+="<productID>"+ param.getElementsByTagName("productID")[0].childNodes[0].nodeValue+"</productID>";
                    result_Products+="<brandID>"+param.getElementsByTagName("brandID")[0].childNodes[0].nodeValue+"</brandID>";
                    result_Products+="<productName>"+param.getElementsByTagName("productName")[0].childNodes[0].nodeValue+"</productName>";
                    result_Products+="<productPrice>"+param.getElementsByTagName("productPrice")[0].childNodes[0].nodeValue+"</productPrice>";
                    result_Products+="<productImage>"+param.getElementsByTagName("productImage")[0].childNodes[0].nodeValue+"</productImage>";
                    result_Products+="<shortDecs>"+param.getElementsByTagName("shortDecs")[0].childNodes[0].nodeValue+"</shortDecs>";
                    result_Products+="<longDecs>"+param.getElementsByTagName("longDecs")[0].childNodes[0].nodeValue+"</longDecs>";
                    result_Products+="<monitor>"+param.getElementsByTagName("monitor")[0].childNodes[0].nodeValue+"</monitor>";
                    result_Products+="<cpu>"+param.getElementsByTagName("cpu")[0].childNodes[0].nodeValue+"</cpu>";
                    result_Products+="<ram>"+param.getElementsByTagName("ram")[0].childNodes[0].nodeValue+"</ram>";
                    result_Products+="<wifi>"+param.getElementsByTagName("wifi")[0].childNodes[0].nodeValue+"</wifi>";
                    result_Products+="<os>"+param.getElementsByTagName("os")[0].childNodes[0].nodeValue+"</os>";
                    result_Products+="<pin>"+param.getElementsByTagName("pin")[0].childNodes[0].nodeValue+"</pin>";
                    result_Products+="<others>"+param.getElementsByTagName("others")[0].childNodes[0].nodeValue+"</others>";
                    result_Products+="<sold>"+param.getElementsByTagName("sold")[0].childNodes[0].nodeValue+"</sold>";
                    result_Products+="<createDate>"+param.getElementsByTagName("createDate")[0].childNodes[0].nodeValue+"</createDate>";
                    result_Products+="<status>"+param.getElementsByTagName("status")[0].childNodes[0].nodeValue+"</status>";
                    result_Products+="</product>";
                    param = result.iterateNext();
                }
                result_Products+="</products>";
                var parser = new DOMParser();
                result_Products = parser.parseFromString(result_Products, "text/xml");
                result_Products.async=false;

                var xsl =document.implementation.createDocument("","",null);
                xsl.async=false;
                xsl.load('xsl/products.xsl');
                transformXMLwithXSLT(result_Products,xsl,'brandProductResult')
            }
        }
        catch(e){alert(e);
            return;
        }
    }

    var productId, name, price, quantity, image;
    var flag = false;;
    function allowDrop(ev)
    {
        ev.preventDefault();
    }

    function drag(ev , productId1 , name1 , price1, quantity1, image1)
    {
        flag = true
        productId = productId1;
        name = name1;
        price = price1;
        quantity = quantity1;
        image = image1;
        ev.dataTransfer.setData("Text",ev.target.id);
    }

    function drop(ev)
    {
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        if (flag == true){
            addToCart(productId,name,price,quantity,image);
            flag = false;
        }
    }
</script>
<div id="header">
    <div class="logo">

        <span class="font_0">
            <div>
                <div> <span class="logo1">SM</span></div>
                <div><span class="logo2">TABLET</span></div>
                <div> <span class="logo3"> Shop</span></div>
            </div>
        </span>
    </div>
    <!--End logo-->
    <div class="login-form" id="login-form">
        <c:set var = "user" value = "${sessionScope.USER}"></c:set>
        <c:if test = "${not empty user}">
            <div id="welcome">
                <span>Welcome: ${sessionScope.USER.custEmail},</span>
                <a id="Btnlogout" href="#" onclick="logout();">Log out</a>
            </div>
        </c:if>
        <c:if test = "${empty user}">
            <div>
                <form id="testform" name="testform" onsubmit="">
                    <table border="0" cellspacing="0">
                        <tr>
                            <td class="username"><label>Email:</label> </td>
                            <td class="password"><label> Password:</label></td>
                            <td></td><td></td>
                        </tr>
                        <tr>
                            <td>
                                <input  style=" width: 150px;"type="text" name="txtUsername" id="txtUsername"value="">
                            </td>
                            <td>
                                <input style=" width: 150px;" type="password" name="txtPassword" id="txtPassword" value="">
                            </td>
                            <td>
                                <input id="btn" type="submit" value="Login" onclick="loginCustomer();"/>
                            </td>
                            <td>
                                <input id="btn" value="Register" onclick="window.location.href='register.jsp'"/>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </c:if>
    </div><!--End login-form-->
    <div id="cart" class="" ondragover="allowDrop(event)"
         ondrop="drop(event)">
        <div class="heading" id="heading" onmouseover="moveIn();" onmouseout="moveOut();">
<!--            <h4>Shopping Cart</h4>-->
            <a><span id="cart-total">0 product(s)</span></a>
        </div>
        <div class="content" id="cart_content" onmouseover="moveIn();" onmouseout="moveOut();">
            Your cart is empty !!!
        </div>
    </div>

    <div class="clear"></div>
    <ul class="nav">
        <li><a href="index.jsp">Home</a></li>
        <li><a href="products.jsp">Product</a>
            <ul class="child">
                <c:import url="xml/brands.xml" charEncoding="UTF-8" var="xmldocBrand"/>
                <c:import url="xsl/menuBrands.xsl" charEncoding="UTF-8" var="xsldocBrand"/>
                <x:transform xml="${xmldocBrand}" xslt="${xsldocBrand}"/>
            </ul>
        </li>
        <li><a href="tabletNews.jsp">News</a></li>
        <li><a>FAQ</a></li>
        <li><a>Contact</a></li>
    </ul>
</div><!--End header-->
<div id="Product-Detail" style="display: none"></div>

